<template>
  <view>
    <view class="search-box">
      <uni-search-bar @input="input" @confirm="search" bgColor="#FFFFFF" :radius="100" cancelButton="none" maxlength="100" :focus="true"></uni-search-bar>
    </view>
    <view class="sear-result" v-if='searchResults.length !== 0'>
      <view class="sear-result-item" v-for="(item,i) in searchResults" :key=i>
        <view class="item-name" @click="gotoSearchList(item)">
          <view class="item-name-left">
            <uni-icons type="search" size="17"  class="icon"></uni-icons>
            <text>{{item}}</text>
          </view>
            <uni-icons type="right" size="19"  class="icon"></uni-icons>
        </view>
      </view>
    </view>
    <view class="history-box" v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons class="history-title-icon" type="trash" size="22" color="#9B9B98" @click="cleanHistory"></uni-icons>
      </view>
      <view class="history-content">
          <uni-tag class="history-content-tag" :text="item" v-for="(item,index) in historys" :key=index type="default" inverted="true" :circle="true" @click='gotoSearchList(item)'></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        historyList: [],
        searchHistory: '',
        searchValue: '',
        //删除数据
        searchResults: [],
        timer: null,
        str: ''
      };
    },
    computed: {
      historys() {
        return [...this.historyList].reverse()
      }
    },
    onShow() {
      this.historyList = JSON.parse(uni.getStorageSync('searchHistory') || '[]')
    },
    methods: {
      search(e) {
        console.log(e.value)
        this.searchResults = []
        this.searchHistory = e.value
        this.saveHistoryList()
        this.gotoSearchList(e.value)
      },
      input(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          console.log(e)
          this.str = e
          this.getSearchList()
          this.searchValue = e
        },500)
      },
      async getSearchList() {
        if(this.str == '') {
          //删除数据
          this.searchResults = []
          return 
        }
        const {data:{data:{message:res}},data:info} = await uni.$http.post('/api/task/fuzzyQuery',this.str).catch(err => uni.$showMsg('网络错误！'))
        this.searchResults = res
      },
      saveHistoryList() {
        const set = new Set(this.historyList)
        set.delete(this.searchHistory),
        set.add(this.searchHistory),
        this.historyList = Array.from(set)
        uni.setStorageSync('searchHistory', JSON.stringify(this.historyList))
      },
      cleanHistory() {
        uni.showModal({
          title: '提示',
          content: '是否清除历史记录',
          success: res => {
            if (res.confirm) {
                this.historyList = []
                uni.setStorageSync('searchHistory','[]')
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
          },
          fali: err => uni.$showMsg('删除失败，请稍后重试！')
        })
      },
      gotoSearchList(item) {
        this.searchHistory = item
        this.saveHistoryList()
        setTimeout(() => {
          this.searchResults = [] 
        },501)
        uni.navigateTo({
          url: '/subpkg/category/category?str=' + item
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .sear-result {
    border-radius: 8px;
    // border: 1px solid #0062CC;
    .item-name {
      height: 100rpx;
      // width: 100%;
      background-color: #FFFFFF;
      // background-image: linear-gradient(to right bottom , #F0EABF, #F7F0C1);
      border-bottom: 1px solid #FAF5DB;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 0 20rpx;
      .item-name-left {
        display: flex;
        align-items: center;
        justify-content: center;
        text {
          margin-left: 5px;
        }
      }
  }
}
 .history-box {
   .history-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin: 15px 10px;
     text {
       font-weight: 700;
       font-size: 17px;
     }
   }
   .history-content {
     display: flex;
     flex-wrap: wrap;
     // margin: 0 7px;
     .history-content-tag {
       margin: 10px 10px 5px 10px;
     }
   }
 }
</style>
